<template>
  <el-dialog title="分配角色" :visible="showRoleDialog" @close="cancel">
    <el-checkbox-group v-model="ids">
      <!--    checkbox 里 label就相当于是value  绑定id 向服务器发请求要用到-->
      <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">
        {{ item.name }}</el-checkbox
      >
    </el-checkbox-group>
    <el-row type="flex" justify="center" style="margin-top:50px">
      <el-button @click="save" type="primary">确定</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
//  获取用户基本信息
import { getUserBasicInfo } from '@/api/user'
// 获取角色列表
import { getRoleList } from '@/api/setting'
//  给员工分配角色
import { setRoles } from '@/api/employees'
export default {
  //  父传子
  props: {
    showRoleDialog: {
      type: Boolean,
      default: false
    },
    userId: {
      type: String,
      default: '',
      require: true
    }
  },
  data () {
    return {
      ids: [], //  角色id的数组
      roleList: [] // 角色列表
    }
  },
  created () {
    this.getRoleList()
  },
  methods: {
    // 获取当前员工基本信息
    async getUserBasicInfo (id) {
      let res = await getUserBasicInfo(id)
      // console.log(res)
      this.ids = res.data.roleIds
    },
    // 获取角色列表
    async getRoleList () {
      let res = await getRoleList({ page: 1, pagesize: 9999 })
      // console.log(res)
      this.roleList = res.data.rows
    },
    // 取消按钮的点击事件
    cancel () {
      // 通知父组件 关闭对话框
      this.$emit('update:showRoleDialog', false)
      // 清空数组
      this.ids = []
    },
    // 确定按钮的点击事件
    async save () {
      // 发送请求 保存
      // 给员工分配角色
      await setRoles({
        id: this.userId,
        roleIds: this.ids
      })
      this.$message.success('分配角色成功')
      // 通知父组件 关闭对话框
      this.$emit('update:showRoleDialog', false)
    }
  }
}
</script>

<style></style>
